import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';

const styles = theme => ({
    root: {
        width: '100%',
        backgroundColor: theme.palette.background.paper,
    },
    listItem:{
        padding:10
    },
    avatar:{
        width: 70,
        height: 70
    },
    primary:{
        fontSize: 16,
        marginBottom:1
    },
    secondary: {
        
    }
});

function SimpleCommentList(props) {
    const { classes, listComments } = props;
    console.log(listComments)
    return (
        <List className={classes.root}>
            {
                listComments.map((message, index)=>(
                    <ListItem alignItems="flex-start" key={index} className={classes.listItem}>
                        <ListItemAvatar>
                            <Avatar alt={message.name} src={message.src} className={classes.avatar}/>
                        </ListItemAvatar>
                        <ListItemText
                            primary={message.name}
                            secondary={`${message.position } ${message.time}`}
                            classes={{primary:classes.primary,secondary:classes.secondary}}
                        />
                    </ListItem>
                ))
            }
        </List>
    );
}
SimpleCommentList.propTypes = {
    classes: PropTypes.object.isRequired,
    listComments:PropTypes.array
};
export default withStyles(styles)(SimpleCommentList);
